<template>
  <div>
    <h2>产品种类</h2>
    <div class="chart" id="chart3">
      图表内容
    </div>
  </div>
</template>

<script>
import { getCategorySale } from '@/api/data.js'
// import axios from 'axios'
import * as echarts from 'echarts'
import { onMounted, reactive } from 'vue'
export default {
setup(){
    //获取数据函数
    const getData = () => {
      return getCategorySale()
    }

    onMounted(async ()=>{
      data = await getData()
      let myChart = echarts.init(document.getElementById("chart3"))
      myChart.setOption({
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: data.data.data.chartData.day,
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        legend: {
          textStyle: {
            color: 'white'  // 设置图例标签文字颜色为白色
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        series: [
          {
            name: "服饰",
            type: "bar",
            data: data.data.data.chartData.num.Clothes,
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
          },
          {
            name: "数码",
            type: "bar",
            data: data.data.data.chartData.num.digit,
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
          },
          {
            name: "家电",
            type: "bar",
            data: data.data.data.chartData.num.Electrical,
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
          },
          {
            name: "家居",
            type: "bar",
            data: data.data.data.chartData.num.gear,
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
          },
          {
            name: "日化",
            type: "bar",
            data: data.data.data.chartData.num.Chemicals,
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
          },
        ]
      })
    })

    //图表数据
    let data = reactive({})

    return{
      getData,data
    }
}
}
</script>

<style lang="less" scoped>
h2 {
  height: .75rem;
  color: #fff;
  line-height: .75rem;
  text-align: center;
  font-size: 0.35rem;
}

.chart {
  height: 5.625rem;
}
</style>